<template>
	<view class="flex uni-row flex-wrap justify-between">
		<view v-for="(m,i) in list" :key="i" class="margin-top" :style="{width: width + 'rpx'}">
			<image @click="navToCourse(m.id,m.url)" :src="m.tp" mode="widthFix" :style="{width: width +'rpx',height: height + 'rpx'}">
			</image>
			<text class="margin-top-xs" :class="list.length > 1 ? 'title': 'title-c'">{{m.title}}</text>
			<view class="flex uni-row justify-between align-center margin-top-xs">
				<text class="text-orange">{{m.price > 0 ? '￥' + m.price: ''}}</text>
				<view>
					<u-button v-if="m.price > 0" @click="navToCourse(m.id,m.url)" type="error" size="mini"
						:customStyle="button">立即报名</u-button>
					<u-button v-else @click="navToCourse(m.id,m.url)" type="success" size="mini">免费</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: []
			},
			width: {
				type: [Number,String],
				default: 336
			},
			height: {
				type: [Number,String],
				default: 190
			}
		},
		data() {
			return {
				list: [],
				button: {
					backgroundImage: 'linear-gradient(120deg, #fd5f37, #e03834)'
				}
			}
		},
		watch: {
			data(arr) {
				this.list = arr;
			}
		},
		mounted() {
			this.list = this.data
		}
	}
</script>

<style lang="less">
	.title {
		height: 80rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2; /** 显示的行数 **/
	}
	.title-c {
		display: -webkit-box;
	}
</style>
